2D Transformacije

⬅ Povratak na početnu

translate()

Pomiče element po X i Y osi. Ne utječe na okolne elemente.

transform: translate(40px, 20px)

rotate()

Rotira element za zadani kut oko njegove ishodišne točke.

transform: rotate(45deg)

scale()

Mijenja veličinu elementa. Vrijednosti >1 povećavaju, <1 smanjuju.

transform: scale(1.5)

skew()

Nakošava element duž X i Y osi za zadane kutove.

transform: skew(20deg, 10deg)

scaleX()

Mijenja širinu elementa, visina ostaje ista.

transform: scaleX(2)

scaleY()

Mijenja visinu elementa, širina ostaje ista.

transform: scaleY(2)

translateX()

Pomiče element samo po horizontalnoj osi.

transform: translateX(50px)

translateY()

Pomiče element samo po vertikalnoj osi.

transform: translateY(40px)

matrix()

Kombinira sve 2D transformacije u jednu matricu: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY). Moćan ali kompleksan zapis.

transform: matrix(1.2, 0.2, -0.2, 1.2, 30, 10)